/**
 * Created by hejg on 2018/5/7.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Style from '../../../../components/Style';
import Tool from '../../../../components/Tool';
import Index_1 from '../components/ExaminaIndex_1';
import Index_2 from '../components/ExaminaIndex_2';
import Index_3 from '../components/ExaminaIndex_3';
import Echarts from 'native-echarts';
export default class Examination extends Component {
    constructor(props) {
        super(props);
        this._change = this._change.bind(this);
        this.state={
            select:'index_1',
        }
    }
    _change(value){
        this.setState({
            select:value,
        });
    }
    render() {
        const option = {
            title: {
                text: '综合评估排名',
                left:'35%',
                textStyle: {
                    fontSize:16,
                }
            },
            tooltip: {},
            legend: {
                data: ['综合评估']
            },
            radar: {
                shape: 'circle',
                center: ['50%', '55%'],
                radius: 95,
                splitArea: {
                    areaStyle: {
                        color: ['#d0d0d0',
                            '#ddd', '#e0e0e0',
                            '#eee', '#f0f0f0'],
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 10
                    }
                },
                name: {
                    textStyle: {
                        color: '#999',
                        //backgroundColor: '#999',
                        fontSize:12,
                        borderRadius: 3,
                        padding: [3, 15]
                    }
                },
                indicator: [
                    { name: '整体收入情况',max:22},
                    { name: '成员格局战', max:22},
                    { name: 'IDC格局战',max:22},
                    { name: 'ICT格局战', max:22},
                    { name: '专线格局战', max:22},
                    { name: '物联网格局战',max:22},
                    { name: '和教育', max:22}
                ]
            },
            series: [{
                name: '',
                type: 'radar',
                // areaStyle: {normal: {}},

                data : [
                    {
                        value : [20,10,12,8,15,10,9],
                        name : '',
                        areaStyle: {
                            normal: {
                                opacity: 0.9,
                                color: 'rgba(175,205,224,1)'
                            }
                        }
                    }
                ]
            }]
        };
        let MainPartNode = null;
        switch (this.state.select) {
            case 'index_1':
                MainPartNode = <Index_1 option={option}/>;
                break;
            case 'index_2':
                MainPartNode = <Index_2 option={option}/>;
                break;
            case 'index_3':
                MainPartNode = <Index_3 option={option}/>
                break;
        }
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <TabItem title={'综合评估'} select={this.state.select} change={this._change} value={'index_1'}/>
                    <TabItem title={'诊断详情'} select={this.state.select} change={this._change} value={'index_2'}/>
                    <TabItem title={'地市对标'} select={this.state.select} change={this._change} value={'index_3'}/>
                </View>
               {MainPartNode}
            </View>
        );
    }
}
class TabItem extends Component{
    render(){
        return(
            <TouchableOpacity
                onPress={()=> this.props.change(this.props.value)}
                style={{height:Style.css.titleHeight,justifyContent:'center',borderBottomWidth:1,
                    borderColor:this.props.select == this.props.value?Style.color.blue:'transparent'}}>
                <Text style={{fontSize:Style.fontSize.normal,
                    color:this.props.select == this.props.value?Style.color.blue:Style.color.gray}}>
                    {this.props.title}
                </Text>
            </TouchableOpacity>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: Style.color.screen
    },
    listView: {
        height: Style.css.titleHeight, flexDirection: 'row', marginTop: 10,
    },
    titleView: {
        paddingLeft: 20,
        alignItems: 'center',
        height: Style.css.titleHeight,
        flexDirection: 'row',
        backgroundColor: Style.color.white,
        borderBottomWidth:2,
        borderColor:Style.color.gray,
        justifyContent: 'space-around',
    },

})